<template>
	<view class="createReport">
		<view class="createReportBox">
			<view class="typeBox">
				<view class="reportTitle">
					<text>*</text>投诉类型
				</view>
				<view class="" @tap="show = true">
					<view class="reportValue" :style="{color : value ? '#000' : '#8e8e8e'}">
						{{ value ? value : '请选择投诉类型'}}
					</view>
					<image class="down ml8" src="https://wx.xtwaixie.com/img/down.png" />
				</view>
			</view>
			<view class="typeBox" style="margin-bottom: 20rpx;">
				<view class="reportTitle">
					<text>*</text>投诉内容
				</view>
			</view>
			<textarea style="width: 100%;" :value='textareaValue' placeholder='请填写10个字以上的问题描述以便我们提供更好的帮助' placeholder-style='font-size:28rpx;' :maxlength='200' @input="input"></textarea>
			<!-- <uni-easyinput type="textarea" :inputBorder="false" :trim='true' :autoHeight='true' v-model="textareaValue"
				placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助" :maxlength='200'
				placeholderStyle='font-size:28rpx;'></uni-easyinput> -->
			<view class="inputNum">
				{{textareaValue.length}}/200
			</view>
		</view>
		<view class="createReportBox">
			<view class="typeBox" style="margin-bottom: 20rpx;">
				<view class="reportTitle">
					<text>*</text>相关截图
				</view>
			</view>
			<view class="imageBox">
				<view class="" v-for='(item,index) in picture' :key="index">
					<image referrerPolicy='no-referrer' :src="img_path + item.url" mode="aspectFill"
						class="choosedImage"></image>
					<image class="img-del" src="https://wx.xtwaixie.com/img/del.png" @tap="onDel(index)" />
				</view>
				<image src="@/static/addImg.png" mode="aspectFit" @tap="chooseImg()" class="addImg"></image>
				<view class="" v-for="i in (2 - picture.length % 3)">

				</view>
			</view>
		</view>
		<view class="" style="height: 95rpx;">

		</view>
		<view class="pd715 bgcf pob">
			<button class="sub" @tap="submit">提交</button>
		</view>
		<model :value='showTips' title='是否举报该报价？' agreeBtn='确认' @change='showTips=false' @agree='confirmSale' />
		<van-popup :show="show" round position="bottom">
			<van-picker :columns="columns" show-toolbar @confirm="confirmType" @cancel="show = false" />
		</van-popup>
		<van-popup :show="showNotice" custom-style='background:#00000000;'>
			<image src="https://cdn.xtwaixie.com/uploads/20240415/1713170369661ce7c10e9d1.gif" mode="widthFix" style="width: 500rpx;padding-bottom: 600rpx;"></image>
		</van-popup>
	</view>
</template>

<script>
	const http = require('../../utils/http');
	import model from "../../component/model";
	export default {
		components: {
			model
		},
		data() {
			return {
				show: false,
				showTips: false,
				value: '',
				textareaValue: '',
				columns: ["与报价无关", "骚扰信息", "广告推销", "乱报价"],
				picture: [],
				id: '',
				img_path:'',
				showNotice:false
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.img_path = http.img_path
			console.log(this.img_path)
		},
		methods: {
			onClose(){
				this.showNotice = false
			},
			input(e){
				this.textareaValue = e.detail.value
			},
			confirmType(e) {
				this.value = e.detail.value
				this.show = false
			},
			confirmSale() {
				this.showTips = false
				let ifFirstPopup = uni.getStorageSync('ifFirstPopup')
				if (!ifFirstPopup) {
					this.showNotice = true
					uni.setStorageSync('ifFirstPopup', true)
				}
				const self = this
				uni.requestSubscribeMessage({
					tmplIds: ['zEKGEDd0uLNSqWJ5iOdozHstt5_n9dpS1lv-jcdXtXQ'],
					complete(res) {
						console.log(res)
						self.showNotice = false
						self.submits()
					}
				})
			},
			submits() {
				http.request('demand/complaint', {
						id: this.id,
						description: this.textareaValue,
						type: this.value,
						file: this.picture
					})
					.then((res) => {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
					.catch((res) => {
						console.log(res);
					});
			},
			submit() {
				if (!this.value) {
					uni.showToast({
						title: '请选择投诉类型',
						icon: "none"
					})
					return
				}
				if (this.textareaValue.trim().length < 10) {
					uni.showToast({
						title: '请填写10个字以上的问题描述以便我们提供更好的帮助',
						icon: "none"
					})
					return
				}
				if (this.picture.length == 0) {
					uni.showToast({
						title: '请上传相关截图',
						icon: "none"
					})
					return
				}
				this.showTips = true
			},
			change(e) {
				this.value = e
			},
			onDel(index) {
				this.picture.splice(index, 1)
			},
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['compressed'],
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						for (let j = 0; j < res.tempFilePaths.length; j++) {
							http.upLoadFile('base/uploadImg', 'image', res.tempFilePaths[j], {})
								.then((res) => {
									that.picture.push({
										url: res.data.url,
										name: res.data.url
									})
									uni.hideLoading();
								})
								.catch((res) => {
									uni.hideLoading();
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								});
						}
					},
					fail() {
						uni.hideLoading();
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F7F6;
	}

	.createReport {
		.bottomBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			display: flex;
			height: 90rpx;
			justify-content: center;
			align-items: center;
			background-color: #FFF;

			>view {
				width: 500rpx;
				color: #FFF;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 70rpx;
				text-align: center;
				border-radius: 15rpx;
				background-color: #57BE6A;
			}
		}

		.imageBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.choosedImage {
				width: 220rpx;
				height: 220rpx;
			}

			.addImg {
				width: 220rpx;
				height: 220rpx;
			}

			.img-del {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				right: 0;
				top: 0;
			}

			>view {
				width: 220rpx;
				height: 220rpx;
				margin-bottom: 20rpx;
				position: relative;
			}

			// >view{
			// 	width: 200rpx;
			// 	height: 200rpx;					margin-bottom: 20rpx;
			// 	position: relative;
			// 	&:nth-child(3n+1){
			// 		margin-right: 20rpx;
			// 	}
			// 	&:nth-child(3n+2 ){
			// 		margin-right: 20rpx;
			// 	}
			// }
			// image{
			// 	width: 100%;
			// 	height: 100%;
			// }

		}

		.createReportBox {
			width: 750rpx;
			padding: 0 25rpx 20rpx;
			margin: 20rpx auto;
			box-sizing: border-box;
			background: #FFF;

			.typeBox {
				border-bottom: 1rpx solid #E2E2E2;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				>view {
					display: flex;
					align-items: center;
				}

				.reportValue {
					white-space: nowrap;
					font-size: 28rpx;
				}
			}
		}

		.reportTitle {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;

			text {
				color: #F00;
			}
		}

		.inputNum {
			font-size: 28rpx;
			text-align: right;
			margin-top: 6rpx;
			color: #8e8e8e;
		}
	}
</style>